<template>
  <div>
    <div>
      <router-view />
    </div>
    <div class="bottom_nav">
      <van-tabbar v-model="active" route>
        <van-tabbar-item
          v-for="(item, i) in icon"
          :key="i"
          routev
          :badge="item.badge > 0 ? item.badge : ''"
          :to="item.path"
        >
          <span>{{ item.title }}</span>
          <template #icon="props">
            <img :src="props.active ? item.active : item.inactive" />
          </template>
        </van-tabbar-item>
      </van-tabbar>
    </div>
  </div>
</template>

<script>
import { mapState, mapMutations } from "vuex";
export default {
  name: "BottomNav",
  data() {
    return {
      active: 0,
    };
  },

  computed: {
    ...mapState(['shopCarCount']),
    icon() {
      return [
          {
            title: "首页",
            path: "/",
            active: require("../assets/images/home_active.png"),
            inactive: require("../assets/images/home2.png"),
          },
          {
            title: "饮品",
            path: "/menu",
            active: require("../assets/images/menu_active.png"),
            inactive: require("../assets/images/menu.png"),
          },
          {
            title: "购物车",
            path: "/shopcar",
            active: require("../assets/images/shopcar_active.png"),
            inactive: require("../assets/images/shopcar.png"),
            badge: this.shopCarCount
          },
          {
            title: "我的",
            path: "/mine",
            active: require("../assets/images/mine_active.png"),
            inactive: require("../assets/images/mine2.png"),
          },
        ]
         
    },
  },

  created() {
    this.getShopCarCount();
  },
  methods: {
    ...mapMutations(["changeShopCarCount"]),
    // 查询购物车条目
    getShopCarCount() {
      let tokenString = this.$cookies.get("tokenString");

      if (!tokenString) {
        console.log("浏览器token不存在");
        return;
      }

      this.axios({
        method: "GET",
        url: this.baseURL + "/shopcartRows",
        params: {
          appkey: this.appkey,
          tokenString,
        },
      })
        .then((response) => {
          // console.log(response);

          if (response.data.code === 700) {
            this.$toast({
              message: response.data.msg,
              forbidClick: true,
              duration: 1000,
            });
          }

          if (response.data.code === 8000) {
            this.changeShopCarCount(response.data.result);
          }
        })
        .catch((err) => {
          console.error(err);
        });
    },
  },
};
</script>

<style lang="less">
.bottom_nav {
  padding-bottom: 50px;
}
</style>
